<template>
  <div>
    <!-- <head-top title="首页" goBack="true"></head-top> -->
    <div class="top">
      <p class="center"><img :src="url"></p>
      <div v-if="app.isLogin">
        {{ app.username }}
      </div>
      <div class="login" v-else>
        <router-link to="login">登录</router-link>
        <router-link to="register/1">注册</router-link>
      </div>
      <div class="census">
        <div class="vux-1px-r">
          <span>88</span>
          <br/>
          七天待还
        </div>
        <div class="">
          <span>88</span>
          <br/>
          七天待还
        </div>
      </div>
    </div>
    <div class="middle">
      <router-link to="collection">
        <div class="vux-1px-r">
          <i slot="icon" class="iconfont icon-saomiao" style="color: #f1904b"></i>
          收款
        </div>
      </router-link>
      <router-link to="collection">
        <div class="">
          <i slot="icon" class="iconfont icon-erweima" style="color: #309dd6"></i>
          收款码
        </div>
      </router-link>
    </div>
    <div class="menu" v-for="menu in menus">
      <p class="title">{{ menu.title }}</p>
      <grid>
        <grid-item v-for="item in menu.children" :link="item.link" @on-item-click="onItemClick">
          <i slot="icon" :class="['iconfont', 'icon-' + item.icon]" :style="{ color: item.color }"></i>
          <span slot="label">{{ item.title }}</span>
        </grid-item>
      </grid>
    </div>
    <span @click="changeName('名字修改')">{{ common.username }}</span>
    {{ common.password }}
    {{ coolMan }}
  </div>
</template>

<script>
import { Grid, GridItem, Blur } from 'vux'
import { mapState, mapGetters, mapActions } from 'vuex'
import HeadTop from 'components/head'

export default {
  components: {
    Grid,
    GridItem,
    Blur,
    HeadTop
  },
  methods: {
    onItemClick () {
      console.log('on item click')
    },
    ...mapActions([
      'changeName'
    ])
  },
  computed: {
    ...mapState(['common', 'app']),
    ...mapGetters(['coolMan'])
  },
  data() {
    return{
      menus: [{
          title: '我的账户',
          children: [{
            icon: 'icon',
            color: '#ca9e5c',
            title: '我要提现',
            link: '/withdraw'
          }, {
            icon: 'zhanghu',
            color: '#56bae1',
            title: '我的账户',
            link: '/zone/index'
          }, {
            icon: 'yinxingqia',
            color: '#f38477',
            title: '提现银行卡',
            link: '/bank/list'
          }, {
            icon: 'shimingrenzheng',
            color: '#60d8d7',
            title: '实名认证',
            link: '/zone/certification'
          }, {
            icon: 'xiugaimima',
            color: '#ffbf4c',
            title: '修改密码',
            link: '/password/list'
          }, {
            icon: '',
            color: '',
            title: '.',
            link: ''
          }]
        }, {
          title: '交易中心',
          children: [{
            icon: 'woyaoshoukuan',
            color: '#309dd6',
            title: '我的收款',
            link: '/order/collection'
          }, {
            icon: 'icon',
            color: '#fd7748',
            title: '我的提现',
            link: '/order/withdraw'
          }, {
            icon: 'tongjibaobiao-copy',
            color: 'green',
            title: '统计报表',
            link: '/login'
        }]
      }],
      url: 'https://o3e85j0cv.qnssl.com/tulips-1083572__340.jpg'
    }
  }
}
</script>

<style lang="less">
.top{
  background: #42b983;
  color: #fff;
  text-align: center;
  .center {
    padding-top: 20px;
    color: #fff;
    font-size: 18px;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 4px solid #ececec;
    }
  }
  .login{
    a{
      margin: 0 5px;
      color: #fff;
    }
  }
  .census{
    display: flex;
    div{
      flex: 1;
      text-align: center;
      font-size: 12px;
      padding: 5px 0;
      span{
        font-size: 20px;
      }
    }
  }
}
.middle{
  display: flex;
  padding: 8px 0;
  background: #fff;
  margin-bottom: 10px;
  line-height: 50px;
  a{
    flex: 1;
    text-align: center;
    color: #333;
  }
  .iconfont{
    font-size: 38px;
    position: relative;
    top: 5px;
    margin-right: 10px;
  }
}
.menu{
  background: #fff;
  .title{
    padding-left: 5px;
    line-height: 32px;
  }
  .weui-grid__icon{
    text-align: center;
  }
  .iconfont{
    font-size: 30px;
    position: relative;
    top: -10px;
  }
}
</style>
